import React, { FC, useEffect } from 'react';
import { Modal, Form, InputNumber, Input, DatePicker, Select} from 'antd';
import { OperationAppointmentItem } from '@/services/operation/appointment';
import moment from 'moment';

interface OperationModalProps {
  open: boolean;
  operationAppointmentItem: Partial<OperationAppointmentItem> | undefined;
  onSubmit: (values: OperationAppointmentItem) => void;
  onCancel: () => void;
}

const formLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 13 },
};

const AppointmentForm: FC<OperationModalProps> = (props) => {
  const [form] = Form.useForm();
  const { open, operationAppointmentItem, onCancel, onSubmit } = props;

  useEffect(() => {
    if (operationAppointmentItem) {
      form.setFieldsValue({
        ...operationAppointmentItem,
        appointDate: operationAppointmentItem.appointDate ? moment(operationAppointmentItem.appointDate) : moment(),
      });
    }
  }, [props.operationAppointmentItem]);

  const handleSubmit = () => {
    if (!form){
      return;
    } 
    form.submit();
  };

  const handleFinish = (values: { [key: string]: any }) => {
    if (onSubmit) {
      onSubmit({ ...values } as OperationAppointmentItem);
    }
  };

  const modalFooter = { okText: '保存', onOk: handleSubmit, onCancel };

  const renderContent = () => {
    return (
      <>
        <Form.Item
            label="预约日期"
            name="appointDate"
            rules={[{ required: true, message: '请选择预约日期期' }]}
          >
            <DatePicker style={{ width: '100%' }} picker="date" placeholder="请选择预约日期期" />
        </Form.Item>
        <Form.Item
          label="手机号"
          name="mobile"
          rules={[{ required: true, message: '请输入手机号' }]}
        >
          <Input placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item
          label="预约状态"
          name="status"
          rules={[{ required: true, message: '请选择预约状态' }]}
        >
          <Select placeholder="请选择预约状态">
            <Select.Option value="1">预约中</Select.Option>
            <Select.Option value="2">已到店</Select.Option>
            <Select.Option value="3">已取消</Select.Option>
            <Select.Option value="4">已过期</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="预约项目" name="appointItem">
          <Input.TextArea rows={4} placeholder="预约项目" />
        </Form.Item>
        <Form.Item
          label="预约时间"
          name="appointTime"
        >
          <Input placeholder="预约时间" />
        </Form.Item>
        <Form.Item
          label="姓氏"
          name="firstName"
        >
          <Input placeholder="请输入姓氏" />
        </Form.Item>
        <Form.Item
          label="性别"
          name="gender"
        >
          <Select placeholder="请选择性别">
            <Select.Option value="F">女</Select.Option>
            <Select.Option value="M">男</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item hidden={true} name="id">
          <Input hidden={true} />
        </Form.Item>
      </>
    );
  };

  return (
    <Modal
      title={`${
          operationAppointmentItem?.id
          ? '编辑预约'
          : '添加预约'
      }`}
      width={640}
      destroyOnClose
      open={open}
      {...modalFooter}
    >
      <Form {...formLayout} form={form} onFinish={handleFinish}>
        {renderContent()}
      </Form>
    </Modal>
  );
};

export default AppointmentForm;